import React, {Component} from 'react'
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu

export default class SiderMenu extends Component {
  constructor() {
    super()
    this.state= {
      current: '1',
      openKeys: [],
    }
    this.handleClick = this.handleClick.bind(this)
    this.onOpenChange = this.onOpenChange.bind(this)
    this.getAncestorKeys = this.getAncestorKeys.bind(this)
  }

  handleClick(e) {
    console.log('Clicked: ', e);
    this.setState({ current: e.key });
  }
  onOpenChange(openKeys) {
    const state = this.state;
    const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1));
    const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1));

    let nextOpenKeys = [];
    if (latestOpenKey) {
      nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
    }
    if (latestCloseKey) {
      nextOpenKeys = this.getAncestorKeys(latestCloseKey);
    }
    this.setState({ openKeys: nextOpenKeys });
  }
  getAncestorKeys(key) {
    const map = {
      sub3: ['sub2'],
    };
    return map[key] || [];
  }

  render() {
    return (
      <Menu
        mode="inline"
        className="rt-sider-menu"
        openKeys={this.state.openKeys}
        selectedKeys={[this.state.current]}
        onOpenChange={this.onOpenChange}
        onClick={this.handleClick}
      >
        <SubMenu key="sub1" title={<span><Icon type="mail" /><span>仪表盘</span></span>} />
        <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>客户</span></span>}>
          <Menu.Item key="1"><Icon type="team" />潜在学员</Menu.Item>
          <Menu.Item key="2"><Icon type="team" />意向学员</Menu.Item>
          <Menu.Item key="3"><Icon type="mail" />正式学员</Menu.Item>
        </SubMenu>
        <SubMenu key="sub7" title={<span><Icon type="mail" /><span>课程</span></span>} />
        <SubMenu key="sub4" title={<span><Icon type="mail" /><span>班级</span></span>} />
        <SubMenu key="sub5" title={<span><Icon type="setting" /><span>财务</span></span>}>
          <Menu.Item key="4"><Icon type="appstore" />订单</Menu.Item>
          <Menu.Item key="5"><Icon type="appstore" />退款</Menu.Item>
        </SubMenu>
        <SubMenu key="sub6" title={<span><Icon type="setting" /><span>体验</span></span>}>
          <Menu.Item key="6"><Icon type="appstore" />问卷</Menu.Item>
          <Menu.Item key="7"><Icon type="solution" />反馈</Menu.Item>
        </SubMenu>
      </Menu>
      )
  }
}